﻿@{
    ViewData["Title"] = "大转盘抽奖";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="email=no" name="format-detection">
    <meta content="telephone=no" name="format-detection">
    <meta name="msapplication-tap-highlight" content="no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="images/logo.ico" type="image/x-icon" />
    <title>大转盘抽奖</title>
    <link href="~/style.css" rel="stylesheet" />
    <script src="~/js/jquery.min.js"></script>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/layui/layui.js"></script>
</head>
<body>
    <div class="lui-luck-draw">
        <div class="lui-luck-content">
            <div>
                <img id="luckTurntable" src="./images/dial_bg.png" alt="" class="lui-luck-content lui-luck-turntable">
                <img id="luckPointer" onclick="lottery.draw()" src="./images/pointer.png" class="lui-luck-pointer" /8
            </div>
        </div>
    </div>
    <script src="js/dial.js"></script>
    <script>
        layui.use(['layer'], function () {
            var layer = layui.layer;
        });
    </script>
    <script>
        var accountId = 1;
        var lottery = new LotteryDial(document.getElementById('luckPointer'),
            {   // eslint-disable-line
                speed: 30, // 每帧速度
                areaNumber: 8, // 奖区数量
                circleNumber: 5 //旋转圈数
            });
        var index = -1;
        var luckProduct = {};
        lottery.on('start',
            function() {
                // 请求获取中奖结果
                $.ajax({
                    url: '@Url.Action("GetLuckyResult")',
                    dataType: 'json',
                    type: 'post',
                    async :false,
                    data: { accountId: accountId, ran: Math.random() }
                }).done(function(d) {
                    if (d.code === 0) {
                        console.log('剩余次数为0');
                    }
                    if (d.code === 1) {
                        console.log(d.data);
                        index = parseInt(d.data.luckyIndex);
                        luckProduct = d.data;
                        lottery.setResult(index);
                    }
                });
                // 假如请求出错
                //    setTimeout(function () {
                //      lottery.reset()
                //    }, 1000)
            });
        lottery.on('end',
            function() {
                console.log('中奖奖区：' + index);
                if (luckProduct != null && luckProduct.isLucky) {
                    layer.msg('恭喜您中奖了，你将获得了：' + luckProduct.productName);
                } else {
                    layer.msg('谢谢参与!');
                }
                
            });
    </script>
</body>
</html>